<template>
    <div>
        <!-- 头部 -->
        <ul class="menu_top_list book_view_top">
            <!-- <router-link tag="li" to="/home"><span>返回</span></router-link> -->
            <li @click="add()">返回</li>
            <li></li>
            <li></li>
        </ul>
        <div class="max-top">
            <div id="page" >
            <div class="Pinglunfont book_bk_qs1 ">
                <ul id="Pinglun_body" style="margin:0.1rem;" v-for="(items, index) in pink" :key="'I-nfo-' + index">
                    <li class="clear">
                        <figure>
                            <img :src="items.img" width="80" height="80">
                        </figure>
                        <div class="Pinglun_Content2">
                            <span><b>{{ items.name }}</b><em>{{ items.frit }}</em>
                                <br>{{ items.time }}</span>
                        </div>
                        <p>{{ items.pad }} </p>
                    </li>
                </ul>

                <ul id="Pinglun_body" class="max-bom"  v-for="(item, index) in downloadLists "
                    :key="'I-nfo' + index">
                    <li class="clear">
                        <figure>
                            <img :src="item.img" width="80" height="80">
                        </figure>
                        <div class="Pinglun_Content2">
                            <span><b>{{ item.name }}</b><em>{{ item.frit }}</em>
                                <br> {{ item.time }}</span>
                        </div>
                        <p>{{ item.pad }} </p>



                    </li>
                </ul>

            </div>

        </div>
        </div>
        
        <div class="investment book_view_bom">
            <input type="text" v-model="text" @keydown="textIsSet">

        </div>
    </div>
</template>





<script>
import { getImg, getFus, getJsonData } from '@/api/home';
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
    data() {
        return {
            num: null,
            orangeNum: null,
            bookId: null,
            ACfun: null,
            JKL: null,
            book: {},
            pv: null,
            show: false,
            pink: null,
            text: null,
            namespaced: true,
            downloadLists: [

            ],
            text: "",

            newTime: ""  //现在时间
        }
    },


    methods: {
// 获取当前时间
        getNowTime() {
            var date = new Date();
            var time = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            this.newTime = time;
        },
        //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
        //小于10的拼接上0字符串
        // addZero(s) {
        //     return s < 10 ? ('0' + s) : s;
        // },

        like(book) {
            book.like1 = !book.like1
            if (book.like1 == true) {
                book.like += 1
            } else {
                book.like -= 1
            }


        },
        // 发送评论
        textIsSet(e) {
            if (e.keyCode == 13) {
                console.log("text=>", this.text);
// 保存到store.
                this.$store.commit("downloadFun",
                    {
                        name: "时夜MoMo桑",
                        img: require("../assets/images/头像.jpg"),

                        pad: this.text,
                        time: this.newTime,
                        frit: '炎帝'
                    }
                );
                console.log("his=>", this.downloadLists);
                console.log(" this.nowTime=>", this.nowTime);

                // this.pink.pink.unshift({
                //   name:"时夜MoMo桑",
                //   img:require("../assets/images/头像.jpg"),

                //   pad:this.text,
                //   time:"2022/10/27 1:03:34",
                //   frit:'炎帝'
                // })

                this.text = ''
            }
        },

// 跳转
        add() {
            this.$router.back()

            // this.$router.push('/home');
            // localStorage.removeItem("loglevel:webpack-dev-server");
            // console.dir(this);
            // console.log(1);
        },
        getImgFun() {
 // 获取json数据
            getImg({ id: this.$route.query.id }).then(data => {
                // console.log(data); 
                var pav = this.$route.query.id;
                var ace = Math.ceil(pav * 3) - 2
                this.pv = ace
                let arr = data.sfAll;
                // console.log(arr);
                let index = arr.findIndex(item => item.id == this.$route.query.id);
                var obj = arr.splice(index, 1);
                // console.log(obj);


                
                this.num = obj[0].num
                this.orangeNum = obj[0].orangeNum
                this.book = obj[0]
                // console.log(this.book);
                // console.log("pv=>",this.pv);
            })


        }

    },


    created() {
        this.getNowTime();//进入页面调用该方法获取当前时间
        clearInterval(myTimeDisplay);//销毁之前定时器
        var myTimeDisplay = setInterval(() => {
            this.getNowTime(); //每秒更新一次时间
        }, 1000);

        this.downloadLists = this.$store.state.downloadLists;
        // this. changeTab()
        //  粉丝榜
        getFus().then(fun => {

            this.ACfun = fun.fun;
            this.pink = fun.pink


        })
        getJsonData().then(data => {

            this.JKL = data.nba


        });

        // 获取id
        // console.log( this.$route.query);
        if ("id" in this.$route.query) {
            this.getImgFun();
            this.getList()
        }
    },
    watch: {
        // '$route': function (to, from) {
        //     this.changeTab()
        // }
        $route() {
            location.reload();

        },
    },
}
</script>







<style lang="scss">
.max-bom:last-child{
    margin-bottom:150px
}

.post_but {
    width: 70.2px;
    height: 35.1px;
    color: #fff;
    font-size: 15.21px;
    background: #F90;
    border-radius: 18.72px;
    margin: 4px 0;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}


.book_view_bom {
    background-color: #F3F3F3;

    height: 40px;

    position: fixed;
    z-index: 90;
    width: 100%;
    bottom: 0;
}

.investment {
    display: flex;

    z-index: 90;
    justify-content: center;
    padding-top: 5px;

    input {
        width: 90%;
        padding: 5px 0;
        border-radius: 10px;
        text-indent: 10px;
        border: 1px solid #999;
    }
}

#Pinglun_body li {
    background: url(//rs.sfacg.com/web/m/images/xx.gif) repeat-x bottom;
    background-size: 2px;
}

.Pinglun_Content2 {
    B {
        font-weight: normal;
        font-size: 0.11rem;
        color: #3686d8;
    }

    em {
        margin-left: 5px;
        color: #ff6600;
        font-style: normal;
        font-size: 0.11rem;
    }
}


.max-top{
    margin-top: 55px;
}
</style>